<template>
 <!-- <view class="progress-box">
    <text>测评进度</text>
    <progress
      class="progress"
      :percent="percent"
      border-radius="40"
      stroke-width="9"
      color="#cce3ff"
      activeColor="#2d8dfe"
      :active="true"
      active-mode="forwards"
      duration="15"
    />
    <text>{{ add_to }}/{{ topic_length }}</text>
  </view> -->
  <view class="" v-for="(item, index) in dataoptions">
    <view class="question">{{ item.question }}</view>
    <!-- 单选题 -->
    <view class="topic-view">
      <view class="topic-Title">
        <text></text>
        <text>单选题</text>
      </view>
      <view
        class="totic"
        :class="{ 'hover-style': isSelected(index, key) }"
        v-for="(option, key) in item.options"
        :key="index"
        
        >
        <p @click="choose(index, key,option)">
          {{ key }} {{ option }}
        </p>
         </view
      >
    </view>
  </view>
  <button @click="butn">提交</button>
  <!-- 题目 -->

  <!-- 骨架屏 -->
  <!-- <skIndex v-if="skeLeton"></skIndex> -->
</template>

<script setup lang="ts">
import { reactive, ref, toRefs, watch } from "vue";
import { onShow, onLoad } from "@dcloudio/uni-app";
import { log } from "console";
// import RequestApi from "@/public/rquest";
// import type { Topic } from "@/public/decl-type";
// // 骨架屏
// import skIndex from "@/Skeleton/SK-self-test.vue";
let selectedOption = ref();
// 用于判断请求哪个接口，'001':抑郁症测评；'002':男性功能测评；'003'：失眠程度测评
let judg_valu = ref("");
// 获取上个页面传来的值
onLoad((event) => {
  let { type, name } = event as { type: string; name: string };
  judg_valu.value = type;
  uni.setNavigationBarTitle({ title: name });
});
let dataoptions = ref<any>(
  [{
  		"question": "哪种垃圾属于可回收物？",
  		"options": {
  			"A": "废纸",
  			"B": "厨余垃圾",
  			"C": "废电池",
  			"D": "过期药品"
  		},
  		"answer": "A",
      "selected":null
  	},
  	{
  		"question": "下列哪项应该投放到厨余垃圾桶中？",
  		"options": {
  			"A": "剩饭剩菜",
  			"B": "废塑料",
  			"C": "废玻璃瓶",
  			"D": "废旧衣物"
  		},
  		"answer": "A",
       "selected":null
  	},
  	{
  		"question": "下列哪项是有害垃圾？",
  		"options": {
  			"A": "废电池",
  			"B": "塑料袋",
  			"C": "纸箱",
  			"D": "餐巾纸"
  		},
  		"answer": "A",
       "selected":null
  	},
  	{
  		"question": "旧手机应该如何处理才符合垃圾分类原则？",
  		"options": {
  			"A": "投放到可回收物桶中",
  			"B": "丢弃到厨余垃圾桶",
  			"C": "放入有害垃圾桶",
  			"D": "任意丢弃"
  		},
  		"answer": "A",
 "selected":null
  	},
  	{
  		"question": "以下哪种物品属于干垃圾？",
  		"options": {
  			"A": "瓷器碎片",
  			"B": "废旧纸张",
  			"C": "塑料瓶",
  			"D": "过期药物"
  		},
  		"answer": "A",
       "selected":null
  	}, {
  		"question": "如何正确分类处理废旧药品？",
  		"options": {
  			"A": "作为有害垃圾处理",
  			"B": "作为厨余垃圾处理",
  			"C": "作为可回收物处理",
  			"D": "作为其他垃圾处理"
  		},
  		"answer": "A",
       "selected":null
  	}, {
  		"question": "食品包装袋应该如何分类？",
  		"options": {
  			"A": "可回收物",
  			"B": "厨余垃圾",
  			"C": "有害垃圾",
  			"D": "其他垃圾"
  		},
  		"answer": "A",
       "selected":null
  	}, {
  		"question": "废弃的充电宝应该如何正确处理？",
  		"options": {
  			"A": "有害垃圾",
  			"B": "可回收物",
  			"C": "厨余垃圾",
  			"D": "其他垃圾"
  		},
  		"answer": "A",
       "selected":null
  	},
  	{
  		"question": "电子产品如旧电脑应该如何分类处理？",
  		"options": {
  			"A": "可回收物",
  			"B": "有害垃圾",
  			"C": "厨余垃圾",
  			"D": "其他垃圾"
  		},
  		"answer": "A",
       "selected":null
  	}, {
  		"question": "废旧节能灯应该怎样处理？",
  		"options": {
  			"A": "有害垃圾",
  			"B": "可回收物",
  			"C": "厨余垃圾",
  			"D": "其他垃圾"
  		},
  		"answer": "A",
       "selected":null
  	}, {
  		"question": "使用过的一次性筷子属于哪类垃圾？",
  		"options": {
  			"A": "其他垃圾",
  			"B": "可回收物",
  			"C": "有害垃圾",
  			"D": "厨余垃圾"
  		},
  		"answer": "A",
       "selected":null
  	}, {
  		"question": "过期的化妆品应该如何处理？",
  		"options": {
  			"A": "有害垃圾",
  			"B": "可回收物",
  			"C": "其他垃圾",
  			"D": "厨余垃圾"
  		},
  		"answer": "A",
       "selected":null
  	},
  	{
  		"question": "废弃的纽扣电池应该如何分类？",
  		"options": {
  			"A": "有害垃圾",
  			"B": "可回收物",
  			"C": "厨余垃圾",
  			"D": "其他垃圾"
  		},
  		"answer": "A",
       "selected":null
  	}, {
  		"question": "旧衣服应该怎样处理？",
  		"options": {
  			"A": "可回收物",
  			"B": "厨余垃圾",
  			"C": "有害垃圾",
  			"D": "其他垃圾"
  		},
  		"answer": "A",
       "selected":null
  	}, {
  		"question": "废弃的灯泡属于哪类垃圾？",
  		"options": {
  			"A": "有害垃圾",
  			"B": "可回收物",
  			"C": "厨余垃圾",
  			"D": "其他垃圾"
  		},
  		"answer": "A",
       "selected":null
  	}, {
  		"question": "塑料餐盒应该如何分类？",
  		"options": {
  			"A": "可回收物",
  			"B": "厨余垃圾",
  			"C": "有害垃圾",
  			"D": "其他垃圾"
  		},
  		"answer": "A",
       "selected":null
  	}, {
  		"question": "废旧玻璃瓶应该如何分类？",
  		"options": {
  			"A": "可回收物",
  			"B": "厨余垃圾",
  			"C": "有害垃圾",
  			"D": "其他垃圾"
  		},
  		"answer": "A",
      "selected":null
  	}, {
  		"question": "使用过的碳性电池属于哪类垃圾？",
  		"options": {
  			"A": "有害垃圾",
  			"B": "可回收物",
  			"C": "厨余垃圾",
  			"D": "其他垃圾"
  		},
  		"answer": "A",
      "selected":null
  	}
  ]
)
// 存储所有题目
let topic_data = ref<any>([]);
// 总得有多少题
let topic_length = ref(0);
// 存储每一题的数据
let each_question = reactive<{ data: any }>({
  data: {
    topic: "",
    _id: "",
    options: [{
      title:'11111'
    },{
      title: '112222'
    }],
  },
});
let { data } = toRefs(each_question);
interface Resdata {
  data: { data: any[] };
}
function butn(){
      const totalQuestions = dataoptions.value.length;
        const correctAnswers = dataoptions.value.filter(quiz => quiz.answer === quiz.selected).length;

        // 判断是否一半以上答对
        if (correctAnswers >= Math.ceil(totalQuestions / 2)) {
          // 执行页面跳转或其他操作
          uni.navigateTo({
           url:'/pages/rescueex/index'
          })
        } else {
          uni.showToast({ title: "至少要对一半哦！", icon: "none", duration: 1000 });
        }
}
onShow(async () => {
  // 清空上一次的结果
  add_to.value = 1;
  add_to_s.value = 0;
  percent.value = 0;
  topic_id.value = [];
  // if (judg_valu.value == "001") {
  //   //抑郁症测评；
  //   var res = (await RequestApi.DepressionTopics()) as Resdata;
  // } else if (judg_valu.value == "002") {
  //   //男性功能测评；
  //   var res = (await RequestApi.PrematureTopics()) as Resdata;
  // } else {
  //   //失眠程度测评
  //   var res = (await RequestApi.InsomniaTopics()) as Resdata;
  //   // console.log(res)
  // }
  //   console.log(res);

  // topic_data.value = res.data.data;
  // topic_length.value = res.data.data.length;
  // each_question.data = res.data.data[0];
  // percent.value = 100 / topic_length.value;
  // // 骨架屏
  // skeLeton.value = false;
});

// 存储每一道题的下标:初次进入页面
let add_to = ref(1);
// 存储每一道题的下标:点击存储
let add_to_s = ref(0);
// 进度条计算
let percent = ref(0);
// 存储每一次点击的选项id
let topic_id = reactive<{ value: string[] }>({ value: [] });
function isSelected(questionIndex:any, optionKey:any){
   return dataoptions.value[questionIndex].selected === optionKey;
}
// 选择每一道题触发
function choose(questionIndex:any, optionKey:any,option:any) {
  console.log(option,'option');
  dataoptions.value[questionIndex].selected = optionKey;
  console.log(dataoptions.value,11);
}
// 监听是否全部选择完毕，ok的话，跳转下一页
watch([add_to_s, topic_length], (newVal, oldVal) => {
  if (newVal[0] === newVal[1]) {
    console.log("监听是否全部选择完毕，ok的话，跳转下一页");
    // console.log(topic_id.value)
    let OBJ = JSON.stringify({
      type: judg_valu.value,
      topic_id: topic_id.value,
    });
    uni.navigateTo({
      url: "/pages/self-test/result?value=" + OBJ,
    });
  }
});
</script>

<style>
page {
  background: linear-gradient(to bottom, #d6e8ff 30%, #f2f7fb 55%, #f0f5f9 90%);
}
.progress-box {
  display: flex;
  align-items: center;
  padding: 20rpx;
}
.progress {
  flex: 1;
  padding: 0 40rpx;
}
.question {
  padding: 30rpx 20rpx;
  margin: 40rpx 20rpx;
  background-color: #ffffff;
  border-radius: 10rpx;
}
.topic-view {
  background-color: #f3f8ff;
  border-radius: 10rpx;
  padding: 20rpx;
  margin: 20rpx;
  box-shadow: #d6e8ff 0px 0px 23rpx 5rpx;
}
.topic-Title {
  display: flex;
  align-items: center;
}
.topic-Title text:nth-child(1) {
  width: 8rpx;
  height: 27rpx;
  background-color: #0d7cff;
  display: block;
  margin-right: 10rpx;
}
.totic {
  background: #ffffff;
  margin: 20rpx 0;
  padding: 40rpx 10rpx;
  border-radius: 10rpx;
}
.hover-style {
  background-color: #ebf4ff;
  color: #298cff;
}
</style>
